<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style type="text/css">
			span{
				display: block;
				width: 50px;
				height: 80px;
				background: url(img/1.jpg) no-repeat;
				background-size: 100% 100%;
				float: left;
			}
			p{
				float: left;margin-left: 10px;
			}
			canvas{
				border: 1px solid red;
			}
		</style>
	</head>
	<body>
		<canvas id="canvas" width="1100px" height="600px"></canvas><br />
		<p>画笔大小：</p><input type="number" id="number" value="2" style="width: 50px;height: 40px;float: left;"/>
		<p>颜色选择：</p><input type="color"  id="color" value="black" style="width: 50px;height: 40px;float: left;"/>
		<p>橡皮擦:</p><span id="span"></span>
		
		
		<script>
			var color=document.getElementById('color');
			color.onchange=function(){
				obj.changeColor(this.value);
			}
			
			var number=document.getElementById('number');
			number.onchange=function(){
				obj.changeNum(this.value);
			}
			
			var span=document.getElementById('span');
			span.onclick=function(){
				if(obj.stat){
					obj.stat=false;
				}else{
					obj.stat=true;
				}
			}
			
			var black=function(){
				var self=this;
				this.canvas=document.getElementById('canvas');
				this.obj=canvas.getContext('2d');
				this.x=this.y=0;
				this.stat=false;
				this.run=function(){
					this.obj.fillStyle="#ffffff";
	 				this.obj.strokeStyle='black';
	 				this.obj.lineWidth=2;
	 				this.obj.fillRect(0,0,canvas.width,canvas.height);
	 				this.canvas.addEventListener('mousedown',this.mousedown,false);
	 				this.canvas.addEventListener('mouseup',this.mouseup,false);	
				}
				this.changeColor=function(color){
			 		this.obj.strokeStyle=color;
			 	}
				
				this.changeNum=function(size){
			 		this.obj.lineWidth=size;
			 	}
				
				this.mousedown=function(e){
					
					self.x=e.pageX;
					self.y=e.pageY;
					self.canvas.addEventListener('mousemove',self.mousemove,false);
				
				}
				
				this.mousemove=function(e){
					if(self.stat){
						 self.obj.clearRect(e.pageX-10,e.pageY-10,40,40); 
						 return;
					}
					self.obj.beginPath();
					self.obj.moveTo(self.x-10,self.y-10);
					self.obj.lineTo(e.pageX-10,e.pageY-10);
					self.obj.stroke();
					self.obj.closePath();
					self.x=e.pageX;
					self.y=e.pageY;
					
				}
				
				this.mouseup=function(e){
					self.canvas.removeEventListener('mousemove',self.mousemove,false)
				}
			}
			
			obj=new black;
			obj.run();
			
			
			
			
		</script>
		
	</body>
</html>
